<template>
  <div class="root">
    <div class="filters">
      <el-switch
        v-model="filters.type"
        class="mb-2"
        active-value="plugin"
        inactive-value="moudle"
        active-text="插件"
        inactive-text="模板"
      />
      <el-input placeholder="请输入名称搜索" v-model="filters.keywords" style="width:200px"/>
      <el-select v-model="filters.category">
        <el-option value="common">通用</el-option>
        <el-option value="form">表单</el-option>
        <el-option value="list">列表</el-option>
      </el-select>
      <el-select v-model="filters.status">
        <el-option value="1">启用</el-option>
        <el-option value="2">未启用</el-option>
      </el-select>
    </div>
    <el-table :data="stores" style="width: 100%">
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="des" label="简介" width="180" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
          <el-tag v-if="scope.row.status === 2" type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button type="primary" class="mgr10" @click="detail(scope.row.id)">详情</el-button>
          <el-switch
            v-model="scope.row.status"
            @change="changeStus($event)"
            class="mb-2"
            :active-value=1
            :inactive-value=2
            active-text="启用"
            inactive-text="停用"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination"><el-pagination background layout="prev, pager, next,jumper" :total="paginate.total"  v-model:currentPage="filters.page"    v-model:page-size="filters.size" /></div>
  </div>
</template>
<script lang="ts" setup>
import { comStore } from '@/composables/store'
import { comPaginate } from '@/composables/paginate'
const {
  getStores,
  stores,
  detail,
  changeStus,
  filters
} = comStore()
const {
  paginate,
  getTotal
} = comPaginate()

getStores()
getTotal({})

</script>
<style lang="scss" scoped>
.filters{
  display: flex;
  width: 800px;
  justify-content: space-around;
}
.pagination{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
